<template>
  <div class="devicePage">
    <div class="back" @click="back()">
      <i class="el-icon-arrow-left"></i>返回
    </div>
    <div class="deviceList">
      <div class="deviceName" v-for="item in deviceData" :key="item.index">
        <div class="name">{{ item.name }}</div>
        <div class="num">{{ item.num }}</div>
      </div>
    </div>
    <div class="deviceEcharts">
      <div class="deviceTit">
        <div class="titName">{{ device.deviceName }}</div>
        <div class="operation">
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeDate"
          >
          </el-date-picker>
        </div>
      </div>
      <charts v-if="chartsShow" :echartsData="echartsData" ></charts>
    </div>
  </div>
</template>

<script>
import charts from './componets/charts.vue'
import {
  getDeviceApi,
  getWeatherDeviceApi,
  getSoilDeviceApi
} from '@/api/device'
export default {
  name: 'SevencolorUserIndex',
  components: {
    charts
  },

  data () {
    return {
      params: {
        startTime: '',
        endTime: ''
      },
      date: '',
      device: '',
      chartsShow: false,
      echartsData: {},
      deviceData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },

  mounted () {
    this.device = this.$route.query
    this.getData(this.device.deviceType)
  },

  methods: {
    changeDate (e) {
      console.log(e)
      this.params.startTime = e[0] + ' 00:00:00'
      this.params.endTime = e[1] + ' 23:59:59'
      this.chartsShow = false
      this.getData(this.device.deviceType)
    },
    getData (type) {
      if (type === '1') {
        this.getSoilDevice(this.params)
        setTimeout(() => {
          this.chartsShow = true
        }, 100)
        this.deviceData = [
          { name: '温度', num: '24.9' },
          { name: '湿度', num: '9.2' },
          { name: '电导率', num: '62' }
        ]
      } else if (type === '2') {
        this.getWeatherDevice(this.params)
        setTimeout(() => {
          this.chartsShow = true
        }, 100)
        this.deviceData = [
          { name: '温度', num: '23.10' },
          { name: '湿度', num: '56.40' }
        ]
      } else if (type === '4') {
        this.getDeviceList(this.params)
        setTimeout(() => {
          this.chartsShow = true
        }, 100)
      }
    },
    // 长势
    async getDeviceList (params) {
      const res = await getDeviceApi(params)
      console.log(res)
      this.echartsData = res.data
    },
    // 气象
    async getWeatherDevice (params) {
      const res = await getWeatherDeviceApi(params)
      this.echartsData = res.data
      console.log(res)
    },
    // 土壤
    async getSoilDevice (params) {
      const res = await getSoilDeviceApi(params)
      this.echartsData = res.data
      console.log(res)
    },
    back () {
      this.$router.push({
        path: '/shuzhongtian/agriMonitoring'
      })
    }
  }
}
</script>
<style scoped lang="scss">
.back {
  font-size: 1.1542vw;
  margin-bottom: 1.5625vw * 0.834;
  width: 5.2083vw;
  cursor: pointer;
}
.deviceList {
  width: 80.2083vw;
  height: 7.2917vw * 0.834;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  margin-bottom: 1.0417vw * 0.834;
  display: flex;
  justify-content: space-around;
  align-content: center;
  padding: 0 2.0833vw;
  .deviceName {
    margin: auto 0;
    .name {
      font-weight: 600;
      font-size: 28px;
      color: #333333;
      text-align: center;
      margin-bottom: 10px;
    }
    .num {
      font-weight: 400;
      font-size: 20px;
      color: #666666;
      text-align: center;
    }
  }
}
.deviceEcharts {
  width: 80.2083vw;
  height: 36.6146vw * 0.834;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  .deviceTit {
    width: 80.2083vw;
    height: 4.1667vw * 0.834;
    background: rgba(14, 52, 39, 0.1);
    border-radius: 20px 20px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2.0833vw;
    margin-bottom: 0.5208vw;
    .titName {
      font-weight: 600;
      font-size: 28px;
      color: #0e3427;
    }
  }
}
</style>
